import React, { PureComponent, Fragment } from 'react';
import {
  Form,
  Upload, Icon,
  Modal,
  Button,
} from 'antd';
import { connect } from 'dva';

const FormItem = Form.Item;

@connect(({ global, loading }) => ({
  global,
  loading: loading.effects['global/upload'],
}))

@Form.create()
class confirm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      previewVisible: false,
      fileList: [],
    };


  }

  handleChange = (info) => {
    info = info.map((file) => {
      if (file.response) {
        file.url = file.response.url;
      }
      return file;
    });

    info = info.filter((file) => {
      if (file.response) {
        return file.response.status === 'success';
      }
      return true;
    });
    this.setState({ fileList: info });
  };
  customRequest = (componentsData) => {
    let _this = this;
    const { dispatch, form } = this.props;
    let originFile = componentsData.file;
    const formData = new FormData();
    formData.append('multipartFile', originFile);
    formData.append('name', originFile.name);
    formData.append('uid', originFile.uid);
    dispatch({
      type: 'global/upload',
      payload: formData,
      callback(res) {
        if (res.code === 200) {
          let obj = {
            ...res.msg,
          };
          form.setFieldsValue({
            merchantIcon: res.msg.url,
          });
          _this.handleChange([obj]);
        }
      },
    });
  };
  onRemove = (e) => {
    const { fileList } = this.state;
    let dataArr = JSON.parse(JSON.stringify(fileList));
    dataArr.map((item, index) => {
      if (item.uid === e.uid) {
        dataArr.splice(index, 1);
      }
    });
    this.setState({
      fileList: dataArr,
    });
  };
  // 表单
  renderContent = () => {
    const { loading } = this.props;
    const { fileList, previewVisible, previewImage } = this.state;
    const iconProps = {
      action: `/img/upload`,
      onRemove: this.onRemove,
      multiple: false,
      customRequest: this.customRequest,
      listType: 'picture-card',
      className: 'upload-list-inline',
    };
    const uploadButton = (
      <div >
        <Icon type="plus"/>
        <div className="ant-upload-text">上传</div>
      </div>
    );
    return [
      <Upload
        key={'upload'}
        {...iconProps}
        loading={loading}
        fileList={fileList}
        onPreview={this.handlePreview}>
        {uploadButton}
      </Upload>,
      <Modal key={'Modal'} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
        <img alt="example" style={{ width: '100%' }} src={previewImage}/>
      </Modal>,
    ];
  };
  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };
  handleCancel = () => this.setState({ previewVisible: false });

  //弹窗
  render() {
    const { handleVisible, configVisible, onOk } = this.props;
    const { fileList } = this.state;
    return (
      <Modal
        width={500}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title='上传凭证'
        visible={configVisible}
        onOk={() => onOk(fileList)}
        onCancel={() => handleVisible(false, [])}
        footer={[
          <Button key="back" onClick={() => handleVisible(false, [])}>取消</Button>,
          <Button key="submit" type="primary" onClick={() => onOk(fileList)}>
            提交
          </Button>,
        ]}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default confirm;
